<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .3);
			position: fixed;
			left: 0;
			top: 0;
			display: none;
		}

		#smallBox {
			width: 300px;
			height: 300px;
			position: absolute;
			background: red;
			left: 30%;
			top: 30%;
		}
	</style>
</head>

<body>

	<button id="btn">登录</button>
	<div id="box">
		<div id="smallBox">
			<span id="remove">X</span>
		</div>
	</div>

	<script>
		var btn = document.querySelector('#btn'),
			remove = document.querySelector('#remove'),
			box = document.querySelector('#box');

		//给btn绑定事件
		btn.onclick = function () {
			box.style.display = 'block';
		}

		//给X绑定事件
		remove.onclick = function () {
			box.style.display = 'none';
		}

		//给box绑定事件
		box.onclick = function () {
			box.style.display = 'none';
		}

	</script>
</body>

</html>